<template>
  <div class="wz-information-page">
    <ul class="materialList">
      <li><p>名称：</p>{{data?.materialName}}</li>
      <li><p>数量：</p>{{data?.number}}</li>
      <li><p>地点：</p>{{data?.area}}</li>
      <li><p>所属机构：</p>{{data?.orgName}}</li>
      <li><p>保管人：</p>{{data?.userName}}</li>
      <li><p>联系方式：</p>{{data?.phone}}</li>
      <li><p>经度：</p>{{data?.lgtd}}</li>
      <li><p>纬度：</p>{{data?.lttd}}</li>
      <li><p>备注：</p>{{data?.remark}}</li>
    </ul>
    <div class="materialImages">
      <h3>物资图片：</h3>
      <div class="imgList">
        <a-image width="200px" v-for="(item, index) in state.fileList" :key="index" :src="item.thumbUrl" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, watch } from "vue";

  defineOptions({ name: 'Information' });

  const state = reactive({
    fileList: [],
  });

  const props = defineProps({
    data: { type: String },
  });

  watch(
    () => props.data,
    (val) => {
      if (val.imgPath) {
        state.fileList = JSON.parse(val.imgPath);
      }
    }
  );

</script>

<style lang="less" rel="stylesheet/less" scoped>
  .wz-information-page {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    .materialList {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      li {
        width: 50%;
        height: 36px;
        font-size: 15px;
        display: flex;
        align-items: center;
        p {
          width: 80px;
          text-align: right;
          padding-right: 4px;
          color: #666;
        }
      }
    }
    .materialImages {
      padding: 10px;
      display: flex;
      flex-direction: column;
      .imgList {
        padding: 0px 10px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
      }
    }
  }
</style>
